layui.use('flow', function(){
    var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
    var flow = layui.flow;

    $("#clear").click(function (){
        $("#search").val("");
        flowfunction({search: "",tag:""});
        $(".item").css({"background-color":"#f7eff1","color":"#C95B45"});

    })
    // 点击搜索框查询
    $("#searchBtn").click(function (){
        var search=$("#search").val();
        // 清除分类选项样式
        $(".item").css({"background-color":"#f7eff1","color":"#C95B45"});
        flowfunction({search:search,tag:""});
        if(search!=null && search.length!=0){
            $.ajax({
                url:"/mywechat/searchtags",
                data:{tagname:search,type: 9},
                success:function (data){
                }
            })
        }

    })

    // 点击分类查询
    $(".item").click(function(){
        $(this).css({"background-color":"#4D454D","color":"#efefef"}).siblings().css({"background-color":"#F7EFF1","color":"#C95B45"});
        var tag=$(this).find("#categoryname")[0].innerHTML;
        flowfunction({search:"",tag:tag});
        $.ajax({
            url:"/mywechat/searchtags",
            data:{tagname:tag,type:9},
            success:function (data){
            }
        });
    })


    window.flowfunction=function (obj){
        $("#transports").html("");
        flow.load({
            elem: '#transports' //指定列表容器
            ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
                var list = [];
                //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                $.post( '/transport/getlist',{page:page,limit:10,search:obj.search,tag:obj.tag}, function(res){
                    //假设你的列表返回在data集合中
                    layui.each(res.data.records, function(index, item){
                        let div="<a href='/transport/getdetail?id="+item.id+"'>"
                                div+="<div class='transport-item'>";
                                    div+="<div class='firstfont'>";
                                        div+=item.name.substr(0,1);
                                    div+="</div>";

                                    div+="<div class='transport-content'>";
                                        div+="<div class='transport-title'>";
                                            div+=item.name;
                                        div+="</div>";
                                        div+="<div class='transport-detail'>"
                                            div+=item.citys;
                                        div+="</div>"
                                    div+="</div>";
                                div+="</div>";
                            div+="</a>"
                        list.push(div);
                    });
                    //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                    //totalPage为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                    next(list.join(''), page < res.data.size);
                },'json');
            }
        });
    }

    flowfunction({search: "",tag:""});

});
